import React, { useState } from 'react';
import { 
  FileText, Database, Settings, Zap, Shield, Globe, 
  Code, BarChart3, AlertCircle, CheckCircle, Clock, Star,
  GitBranch, Users, ArrowRight, ArrowDown, Lock, Unlock
} from 'lucide-react';

const WorkbenchPRDDesign = ({ onNavigate }) => {
  const [activeSection, setActiveSection] = useState('overview');

  // 产品概览
  const productOverview = {
    version: 'v2.0',
    release_date: '2024-Q2',
    product_goal: 'ESG工作台致力于为企业提供一站式ESG数据管理、分析和报告解决方案，提升ESG管理效率和合规性',
    target_users: ['ESG经理', '数据分析师', '合规专员', '管理层'],
    key_metrics: [
      { metric: '数据录入效率', target: '提升60%', current: 'baseline' },
      { metric: '报告生成时间', target: '减少80%', current: '4小时' },
      { metric: '审批流程时间', target: '减少40%', current: '3天' },
      { metric: '数据准确率', target: '≥99%', current: '95%' }
    ]
  };

  // 功能需求
  const functionalRequirements = [
    {
      id: 'FR001',
      category: '数据管理',
      title: '数据录入与编辑',
      priority: 'P0',
      description: '支持用户通过表单界面录入和编辑ESG数据',
      detailed_requirements: [
        {
          id: 'FR001.1',
          requirement: '支持表单数据录入',
          acceptance_criteria: [
            '提供直观的表单界面，包含所有必要字段',
            '支持必填字段验证和格式校验',
            '提供实时保存功能，防止数据丢失',
            '支持数据预览功能'
          ],
          technical_notes: '使用React Hook Form进行表单管理，Yup进行数据验证'
        },
        {
          id: 'FR001.2',
          requirement: '支持批量数据导入',
          acceptance_criteria: [
            '支持Excel/CSV文件上传',
            '提供数据映射配置界面',
            '支持数据校验和错误报告',
            '提供导入进度显示'
          ],
          technical_notes: '使用Papa Parse解析CSV，SheetJS处理Excel'
        }
      ]
    },
    {
      id: 'FR002',
      category: '审批流程',
      title: '多级审批工作流',
      priority: 'P0',
      description: '建立可配置的多级审批流程，确保数据质量和合规性',
      detailed_requirements: [
        {
          id: 'FR002.1',
          requirement: '审批流程配置',
          acceptance_criteria: [
            '支持自定义审批级别和审批人',
            '支持条件审批规则设置',
            '提供审批流程可视化',
            '支持审批超时设置'
          ],
          technical_notes: '使用状态机模式管理审批流程状态'
        },
        {
          id: 'FR002.2',
          requirement: '审批操作界面',
          acceptance_criteria: [
            '提供审批任务列表',
            '支持审批意见输入',
            '支持附件上传',
            '提供审批历史查看'
          ],
          technical_notes: '集成消息推送服务进行审批提醒'
        }
      ]
    },
    {
      id: 'FR003',
      category: '数据可视化',
      title: '实时监控仪表盘',
      priority: 'P1',
      description: '提供关键ESG指标的实时监控和可视化展示',
      detailed_requirements: [
        {
          id: 'FR003.1',
          requirement: '仪表盘配置',
          acceptance_criteria: [
            '支持拖拽式仪表盘布局',
            '提供多种图表类型选择',
            '支持实时数据更新',
            '具备响应式设计'
          ],
          technical_notes: '使用Chart.js或D3.js进行数据可视化'
        }
      ]
    },
    {
      id: 'FR004',
      category: '报告管理',
      title: '自动化报告生成',
      priority: 'P1',
      description: '自动化生成各类ESG报告，支持多种格式导出',
      detailed_requirements: [
        {
          id: 'FR004.1',
          requirement: '报告模板管理',
          acceptance_criteria: [
            '支持多种报告模板',
            '提供模板自定义功能',
            '支持模板版本管理',
            '提供模板预览功能'
          ],
          technical_notes: '使用模板引擎生成报告，支持PDF/Excel导出'
        }
      ]
    }
  ];

  // 非功能需求
  const nonFunctionalRequirements = [
    {
      category: '性能要求',
      requirements: [
        {
          metric: '页面加载时间',
          target: '< 3秒',
          description: '首页和主要功能页面的加载时间不超过3秒'
        },
        {
          metric: '并发用户数',
          target: '1000+',
          description: '系统应支持1000个并发用户同时操作'
        },
        {
          metric: '数据处理能力',
          target: '10万条/小时',
          description: '批量数据导入处理能力达到每小时10万条记录'
        }
      ]
    },
    {
      category: '安全要求',
      requirements: [
        {
          metric: '数据加密',
          target: 'AES-256',
          description: '敏感数据存储和传输采用AES-256加密'
        },
        {
          metric: '身份认证',
          target: '多因子认证',
          description: '支持用户名密码、短信验证码、邮箱验证等多种认证方式'
        },
        {
          metric: '权限控制',
          target: 'RBAC',
          description: '基于角色的访问控制，支持细粒度权限配置'
        }
      ]
    },
    {
      category: '可用性要求',
      requirements: [
        {
          metric: '系统可用性',
          target: '99.9%',
          description: '系统年度可用性不低于99.9%'
        },
        {
          metric: '故障恢复时间',
          target: '< 30分钟',
          description: '系统故障后恢复时间不超过30分钟'
        },
        {
          metric: '数据备份',
          target: '每日备份',
          description: '数据每日自动备份，备份数据保存30天'
        }
      ]
    }
  ];

  // 渲染产品概览
  const renderOverview = () => (
    <div className="space-y-8">
      <div className="text-center mb-8">
        <FileText className="h-12 w-12 text-blue-600 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-gray-900 mb-2">产品需求概览</h2>
        <p className="text-gray-600">工作台模块的整体产品目标和关键指标</p>
      </div>

      {/* 产品基本信息 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-4">基本信息</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium text-gray-900 mb-2">版本信息</h4>
            <p className="text-blue-600 font-semibold">{productOverview.version}</p>
            <p className="text-gray-500 text-sm">预计发布: {productOverview.release_date}</p>
          </div>
          <div>
            <h4 className="font-medium text-gray-900 mb-2">目标用户</h4>
            <div className="flex flex-wrap gap-2">
              {productOverview.target_users.map((user, idx) => (
                <span key={idx} className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
                  {user}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 产品目标 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-4">产品目标</h3>
        <p className="text-gray-700 leading-relaxed">{productOverview.product_goal}</p>
      </div>

      {/* 关键指标 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-6">关键成功指标</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {productOverview.key_metrics.map((metric, idx) => (
            <div key={idx} className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-900 mb-2">{metric.metric}</h4>
              <div className="flex items-center justify-between">
                <span className="text-green-600 font-semibold">{metric.target}</span>
                <span className="text-gray-500 text-sm">当前: {metric.current}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  // 渲染功能需求
  const renderFunctionalRequirements = () => (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <CheckCircle className="h-12 w-12 text-green-600 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-gray-900 mb-2">功能需求规范</h2>
        <p className="text-gray-600">详细的功能点描述和验收标准</p>
      </div>

      {functionalRequirements.map((fr) => (
        <div key={fr.id} className="bg-white rounded-lg shadow-md p-6">
          <div className="flex items-start justify-between mb-4">
            <div>
              <span className="inline-block px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full mb-2">
                {fr.id}
              </span>
              <h3 className="text-xl font-semibold text-gray-900">{fr.title}</h3>
              <p className="text-gray-600 mt-1">{fr.description}</p>
            </div>
            <div className="flex items-center space-x-2">
              <span className={`px-2 py-1 text-xs rounded-full ${
                fr.priority === 'P0' ? 'bg-red-100 text-red-800' :
                fr.priority === 'P1' ? 'bg-orange-100 text-orange-800' :
                'bg-yellow-100 text-yellow-800'
              }`}>
                {fr.priority}
              </span>
              <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
                {fr.category}
              </span>
            </div>
          </div>

          <div className="space-y-4">
            {fr.detailed_requirements.map((req) => (
              <div key={req.id} className="border border-gray-200 rounded-lg p-4">
                <h4 className="font-medium text-gray-900 mb-2">{req.requirement}</h4>
                
                <div className="mb-3">
                  <h5 className="text-sm font-medium text-gray-700 mb-2">验收标准：</h5>
                  <ul className="space-y-1">
                    {req.acceptance_criteria.map((criteria, idx) => (
                      <li key={idx} className="flex items-start">
                        <CheckCircle className="h-4 w-4 text-green-500 mt-0.5 mr-2 flex-shrink-0" />
                        <span className="text-sm text-gray-600">{criteria}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="bg-gray-50 rounded p-3">
                  <h5 className="text-sm font-medium text-gray-700 mb-1">技术实现要点：</h5>
                  <p className="text-sm text-gray-600">{req.technical_notes}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );

  // 渲染非功能需求
  const renderNonFunctionalRequirements = () => (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <Shield className="h-12 w-12 text-purple-600 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-gray-900 mb-2">非功能需求</h2>
        <p className="text-gray-600">性能、安全、可用性等技术指标要求</p>
      </div>

      {nonFunctionalRequirements.map((category) => (
        <div key={category.category} className="bg-white rounded-lg shadow-md p-6">
          <h3 className="text-xl font-semibold text-gray-900 mb-6">{category.category}</h3>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {category.requirements.map((req, idx) => (
              <div key={idx} className="border border-gray-200 rounded-lg p-4">
                <h4 className="font-medium text-gray-900 mb-2">{req.metric}</h4>
                <div className="text-2xl font-bold text-blue-600 mb-2">{req.target}</div>
                <p className="text-sm text-gray-600">{req.description}</p>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );

  // 渲染流程图
  const renderProcessDiagrams = () => (
    <div className="space-y-8">
      <div className="text-center mb-8">
        <GitBranch className="h-12 w-12 text-indigo-600 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-gray-900 mb-2">业务流程图</h2>
        <p className="text-gray-600">系统核心业务流程、权限矩阵和架构设计</p>
      </div>

      {/* 数据录入审批流程图 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-6">数据录入审批流程</h3>
        <div className="bg-gray-50 rounded-lg p-6">
          <div className="grid grid-cols-1 md:grid-cols-5 gap-4 items-center">
            {[
              { step: '数据录入', actor: '数据分析师', status: 'input' },
              { step: '初审', actor: 'ESG经理', status: 'review' },
              { step: '复核', actor: '合规专员', status: 'verify' },
              { step: '终审', actor: '管理层', status: 'approve' },
              { step: '发布', actor: '系统', status: 'publish' }
            ].map((item, idx) => (
              <React.Fragment key={idx}>
                <div className="text-center">
                  <div className={`w-16 h-16 rounded-full mx-auto mb-2 flex items-center justify-center ${
                    item.status === 'input' ? 'bg-blue-100 text-blue-600' :
                    item.status === 'review' ? 'bg-yellow-100 text-yellow-600' :
                    item.status === 'verify' ? 'bg-orange-100 text-orange-600' :
                    item.status === 'approve' ? 'bg-purple-100 text-purple-600' :
                    'bg-green-100 text-green-600'
                  }`}>
                    {item.status === 'input' ? <Database className="h-6 w-6" /> :
                     item.status === 'review' ? <FileText className="h-6 w-6" /> :
                     item.status === 'verify' ? <Shield className="h-6 w-6" /> :
                     item.status === 'approve' ? <Users className="h-6 w-6" /> :
                     <CheckCircle className="h-6 w-6" />}
                  </div>
                  <div className="font-medium text-gray-900">{item.step}</div>
                  <div className="text-sm text-gray-600">{item.actor}</div>
                </div>
                {idx < 4 && (
                  <div className="hidden md:flex justify-center">
                    <ArrowRight className="h-6 w-6 text-gray-400" />
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

      {/* 权限矩阵图 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-6">权限控制矩阵</h3>
        <div className="overflow-x-auto">
          <table className="min-w-full table-auto">
            <thead>
              <tr className="bg-gray-50">
                <th className="px-4 py-2 text-left font-medium text-gray-900">功能模块</th>
                <th className="px-4 py-2 text-center font-medium text-gray-900">数据分析师</th>
                <th className="px-4 py-2 text-center font-medium text-gray-900">ESG经理</th>
                <th className="px-4 py-2 text-center font-medium text-gray-900">合规专员</th>
                <th className="px-4 py-2 text-center font-medium text-gray-900">管理层</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {[
                { module: '数据录入', analyst: '读写', manager: '读写', compliance: '只读', admin: '只读' },
                { module: '数据审核', analyst: '无权限', manager: '读写', compliance: '读写', admin: '只读' },
                { module: '报告生成', analyst: '只读', manager: '读写', compliance: '读写', admin: '读写' },
                { module: '用户管理', analyst: '无权限', manager: '只读', compliance: '无权限', admin: '读写' },
                { module: '系统设置', analyst: '无权限', manager: '只读', compliance: '只读', admin: '读写' }
              ].map((row, idx) => (
                <tr key={idx}>
                  <td className="px-4 py-2 font-medium text-gray-900">{row.module}</td>
                  <td className="px-4 py-2 text-center">
                    <span className={`px-2 py-1 rounded-full text-xs ${
                      row.analyst === '读写' ? 'bg-green-100 text-green-800' :
                      row.analyst === '只读' ? 'bg-yellow-100 text-yellow-800' :
                      'bg-gray-100 text-gray-800'
                    }`}>
                      {row.analyst}
                    </span>
                  </td>
                  <td className="px-4 py-2 text-center">
                    <span className={`px-2 py-1 rounded-full text-xs ${
                      row.manager === '读写' ? 'bg-green-100 text-green-800' :
                      row.manager === '只读' ? 'bg-yellow-100 text-yellow-800' :
                      'bg-gray-100 text-gray-800'
                    }`}>
                      {row.manager}
                    </span>
                  </td>
                  <td className="px-4 py-2 text-center">
                    <span className={`px-2 py-1 rounded-full text-xs ${
                      row.compliance === '读写' ? 'bg-green-100 text-green-800' :
                      row.compliance === '只读' ? 'bg-yellow-100 text-yellow-800' :
                      'bg-gray-100 text-gray-800'
                    }`}>
                      {row.compliance}
                    </span>
                  </td>
                  <td className="px-4 py-2 text-center">
                    <span className={`px-2 py-1 rounded-full text-xs ${
                      row.admin === '读写' ? 'bg-green-100 text-green-800' :
                      row.admin === '只读' ? 'bg-yellow-100 text-yellow-800' :
                      'bg-gray-100 text-gray-800'
                    }`}>
                      {row.admin}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* 系统架构图 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-6">系统架构设计</h3>
        <div className="bg-gray-50 rounded-lg p-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {/* 前端层 */}
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
              <h4 className="font-medium text-blue-900 mb-3">前端层</h4>
              <div className="space-y-2">
                <div className="bg-white rounded p-2 text-sm">React 18</div>
                <div className="bg-white rounded p-2 text-sm">Vite</div>
                <div className="bg-white rounded p-2 text-sm">Tailwind CSS</div>
                <div className="bg-white rounded p-2 text-sm">Chart.js</div>
              </div>
            </div>

            {/* 业务层 */}
            <div className="bg-green-50 border border-green-200 rounded-lg p-4">
              <h4 className="font-medium text-green-900 mb-3">业务层</h4>
              <div className="space-y-2">
                <div className="bg-white rounded p-2 text-sm">Node.js</div>
                <div className="bg-white rounded p-2 text-sm">Express.js</div>
                <div className="bg-white rounded p-2 text-sm">业务逻辑层</div>
                <div className="bg-white rounded p-2 text-sm">API Gateway</div>
              </div>
            </div>

            {/* 数据层 */}
            <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
              <h4 className="font-medium text-purple-900 mb-3">数据层</h4>
              <div className="space-y-2">
                <div className="bg-white rounded p-2 text-sm">PostgreSQL</div>
                <div className="bg-white rounded p-2 text-sm">Redis</div>
                <div className="bg-white rounded p-2 text-sm">文件存储</div>
                <div className="bg-white rounded p-2 text-sm">备份系统</div>
              </div>
            </div>
          </div>

          {/* 数据流向 */}
          <div className="mt-6 flex items-center justify-center space-x-4">
            <div className="text-center">
              <div className="text-sm text-gray-600">用户交互</div>
              <ArrowDown className="h-6 w-6 text-gray-400 mx-auto mt-1" />
            </div>
            <div className="text-center">
              <div className="text-sm text-gray-600">业务处理</div>
              <ArrowDown className="h-6 w-6 text-gray-400 mx-auto mt-1" />
            </div>
            <div className="text-center">
              <div className="text-sm text-gray-600">数据存储</div>
            </div>
          </div>
        </div>
      </div>

      {/* 泳道图 - 跨部门协作流程 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-6">跨部门协作泳道图</h3>
        <div className="bg-gray-50 rounded-lg p-6 overflow-x-auto">
          <div className="min-w-[800px]">
            <div className="grid grid-cols-4 gap-4">
              {/* 泳道标题 */}
              <div className="bg-blue-100 p-3 rounded font-medium text-center">数据分析师</div>
              <div className="bg-green-100 p-3 rounded font-medium text-center">ESG经理</div>
              <div className="bg-orange-100 p-3 rounded font-medium text-center">合规专员</div>
              <div className="bg-purple-100 p-3 rounded font-medium text-center">管理层</div>

              {/* 流程步骤 */}
              <div className="bg-blue-50 border border-blue-200 rounded p-3 text-sm">
                录入ESG数据<br/>
                <span className="text-xs text-gray-600">表单填写/批量导入</span>
              </div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>

              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-green-50 border border-green-200 rounded p-3 text-sm">
                数据初审<br/>
                <span className="text-xs text-gray-600">完整性/准确性检查</span>
              </div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>

              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-orange-50 border border-orange-200 rounded p-3 text-sm">
                合规性审核<br/>
                <span className="text-xs text-gray-600">法规符合性检查</span>
              </div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>

              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-purple-50 border border-purple-200 rounded p-3 text-sm">
                最终审批<br/>
                <span className="text-xs text-gray-600">战略一致性确认</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="bg-gradient-to-br from-blue-50 to-white min-h-screen">
      {/* 紧凑的标签导航 */}
      <div className="bg-white/80 backdrop-blur-sm shadow-sm border-b border-blue-200/60">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <nav className="flex space-x-1 py-2">
            {[
              { id: 'overview', name: '产品概览', icon: FileText },
              { id: 'functional', name: '功能需求', icon: CheckCircle },
              { id: 'non-functional', name: '非功能需求', icon: Shield },
              { id: 'diagrams', name: '流程图', icon: GitBranch }
            ].map((tab) => {
              const Icon = tab.icon;
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveSection(tab.id)}
                  className={`flex items-center space-x-2 px-4 py-3 rounded-lg font-medium text-sm transition-all duration-200 ${
                    activeSection === tab.id
                      ? 'bg-blue-500 text-white shadow-md'
                      : 'text-gray-600 hover:bg-blue-50 hover:text-blue-600'
                  }`}
                >
                  <Icon className="h-4 w-4" />
                  <span>{tab.name}</span>
                </button>
              );
            })}
          </nav>
        </div>
      </div>

      {/* 主内容区域 - 紧凑布局 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {activeSection === 'overview' && renderOverview()}
        {activeSection === 'functional' && renderFunctionalRequirements()}
        {activeSection === 'non-functional' && renderNonFunctionalRequirements()}
        {activeSection === 'diagrams' && renderProcessDiagrams()}
      </div>
    </div>
  );
};

export default WorkbenchPRDDesign; 